<script setup lang="ts">
import NavBar from '@/components/NavBar/index.vue'
import { navigateBack } from '@/utils/navigation'
</script>

<template>
  <view class="completed">
    <NavBar title="学习完成" />
    <view class="content">
      <view class="success-icon">
        ✓
      </view>
      <view class="success-text">
        恭喜您完成本单元的单词学习！
      </view>
    </view>
    <view class="p-10">
      <uv-button class="back-btn" type="primary" size="large" @click="navigateBack">
        返回
      </uv-button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 800rpx;
}

.success-icon {
  font-size: 120rpx;
  color: #4CAF50;
  margin-bottom: 40rpx;
}

.success-text {
  font-size: 36rpx;
  color: #333;
  text-align: center;
}
</style>
